<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.title{width:615px;margin-top:42px;padding-bottom:5px;border-bottom: 1px dashed #cccccc;margin-bottom: 13px;text-align: center;line-height: 65px;color:#9a3233;font: 17px Georgia, serif;}
			.image{width:621px;margin: 0 auto;}
			.box{width:116px;height:90px;background:#eeeeee;border-top:1px solid #dddddd;border-left: 1px solid #dddddd;
			     border-right:1px solid #bbbbbb;border-bottom: 1px solid #bbbbbb;margin: 0 6px 6px 0;position: relative;float: left;text-align: center;
			     line-height: 90px;}
			.box img{vertical-align: middle;width: 100px;height:75px;padding:2px;border-top:1px solid #aaaaaa;border-left: 1px solid #bbbbbb;
			     border-right:1px solid #cccccc;border-bottom: 1px solid #dedcdd;}	
			img:hover{width: 200px;height:150px;position: absolute;left:-44px;top:-32px;padding:2px;border: 1px solid black;z-index: 1;background: white;}
		    .footer{text-align: center;margin-top: 15px;color:#777;font: 10px Verdana, sans-serif;padding-top:15px;}
		</style>
	</head>
	<body>
		<div class="image">
			<div class="title">Hoverbox Image Gallery</div>
			<div class="main">
				
				<div class="box">
					<img src="img/img(1)/photo01.jpg"/>	
				</div>	
				
				<div class="box">
					<img src="img/img(1)/photo02.jpg"/>	
				</div>	
				
				<div class="box">
					<img src="img/img(1)/photo03.jpg"/>	
				</div>	
				
				<div class="box">	
					<img src="img/img(1)/photo04.jpg"/>	
				</div>	
				
				<div class="box">
					<img src="img/img(1)/photo05.jpg"/>	
				</div>	
				
				<div class="box">
					<img src="img/img(1)/photo06.jpg"/>	
				</div>	
				
				<div class="box">
					<img src="img/img(1)/photo07.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo08.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo09.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo10.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo11.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo12.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo13.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo14.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo15.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo16.jpg"/>	
				</div>	
				
				<div class="box">
	
					<img src="img/img(1)/photo17.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo18.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo19.jpg"/>	
				</div>	
				
				<div class="box">
					
					<img src="img/img(1)/photo20.jpg"/>	
				</div>	
		
		
				
			</div>
			<div class="footer">XHTML CSS 508 | Hoverbox by Nathan Smith. | Read the Tutorial.</div>
		</div>
	</body>
</html>
